<script setup>
import { ref } from 'vue'

const dreamStats = {
  totalDreams: 45,
  lucidDreams: 12,
  averageMood: 75,
  recordStreak: 7
}

const dreamTypes = {
  peaceful: { count: 20, percentage: 45, color: 'var(--dream-peaceful)' },
  mysterious: { count: 15, percentage: 33, color: 'var(--dream-mysterious)' },
  nightmare: { count: 7, percentage: 15, color: 'var(--dream-nightmare)' },
  lucid: { count: 3, percentage: 7, color: 'var(--dream-lucid)' }
}

const monthlyTrends = {
  labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
  data: [
    { type: 'peaceful', values: [5, 7, 4, 8, 6, 5] },
    { type: 'mysterious', values: [3, 4, 5, 3, 4, 6] },
    { type: 'nightmare', values: [2, 1, 3, 1, 2, 1] },
    { type: 'lucid', values: [1, 0, 2, 1, 1, 2] }
  ]
}

const commonSymbols = [
  { name: '飞行', count: 15, category: 'action' },
  { name: '水', count: 12, category: 'element' },
  { name: '门', count: 10, category: 'object' },
  { name: '森林', count: 8, category: 'nature' },
  { name: '光', count: 7, category: 'element' }
]

const dreamPatterns = [
  {
    title: '周期性模式',
    description: '每月初较多平静梦境，月末增加神秘梦境',
    confidence: 85,
    icon: '🌓'
  },
  {
    title: '情绪关联',
    description: '工作压力大时倾向做噩梦，假期时清醒梦较多',
    confidence: 78,
    icon: '🎭'
  },
  {
    title: '符号重复',
    description: '飞行和水的符号经常同时出现',
    confidence: 92,
    icon: '🔄'
  }
]

const recentInsights = [
  {
    date: '2024-03-20',
    content: '最近一周梦境情绪普遍积极，可能与生活状态改善有关',
    type: 'positive'
  },
  {
    date: '2024-03-19',
    content: '发现清醒梦出现频率增加，建议保持记录习惯',
    type: 'neutral'
  },
  {
    date: '2024-03-18',
    content: '注意到压力相关的梦境符号增多，建议适当放松',
    type: 'warning'
  }
]
</script>

<template>
  <div class="dream-insights">
    <!-- 顶部统计卡片 -->
    <div class="stats-grid">
      <div class="dream-card stat-card">
        <div class="stat-icon">📚</div>
        <div class="stat-info">
          <div class="stat-value">{{ dreamStats.totalDreams }}</div>
          <div class="stat-label">记录总数</div>
        </div>
      </div>
      <div class="dream-card stat-card">
        <div class="stat-icon">🦋</div>
        <div class="stat-info">
          <div class="stat-value">{{ dreamStats.lucidDreams }}</div>
          <div class="stat-label">清醒梦次数</div>
        </div>
      </div>
      <div class="dream-card stat-card">
        <div class="stat-icon">📈</div>
        <div class="stat-info">
          <div class="stat-value">{{ dreamStats.averageMood }}%</div>
          <div class="stat-label">平均情绪指数</div>
        </div>
      </div>
      <div class="dream-card stat-card">
        <div class="stat-icon">🔥</div>
        <div class="stat-info">
          <div class="stat-value">{{ dreamStats.recordStreak }}</div>
          <div class="stat-label">连续记录天数</div>
        </div>
      </div>
    </div>

    <!-- 主要分析区域 -->
    <div class="analysis-grid">
      <!-- 梦境类型分布 -->
      <div class="dream-card distribution-chart">
        <h3>梦境类型分布</h3>
        <div class="distribution-container">
          <div 
            v-for="(data, type) in dreamTypes"
            :key="type"
            class="distribution-bar"
          >
            <div class="bar-label">{{ type }}</div>
            <div class="bar-container">
              <div 
                class="bar-fill"
                :style="{ 
                  width: data.percentage + '%',
                  background: data.color
                }"
              ></div>
            </div>
            <div class="bar-value">{{ data.count }}</div>
          </div>
        </div>
      </div>

      <!-- 月度趋势图 -->
      <div class="dream-card trend-chart">
        <h3>月度趋势</h3>
        <div class="trend-container">
          <div class="trend-legend">
            <div 
              v-for="(data, type) in dreamTypes"
              :key="type"
              class="legend-item"
            >
              <span 
                class="legend-color"
                :style="{ background: data.color }"
              ></span>
              <span>{{ type }}</span>
            </div>
          </div>
          <div class="trend-graph">
            <!-- 这里可以使用实际的图表库，这里用简化的表示 -->
            <div class="graph-placeholder">
              月度趋势图表
            </div>
          </div>
        </div>
      </div>

      <!-- 常见符号分析 -->
      <div class="dream-card symbols-analysis">
        <h3>常见符号</h3>
        <div class="symbols-grid">
          <div 
            v-for="symbol in commonSymbols"
            :key="symbol.name"
            class="symbol-card"
          >
            <div class="symbol-header">
              <span class="symbol-name">{{ symbol.name }}</span>
              <span class="symbol-count">{{ symbol.count }}次</span>
            </div>
            <div class="symbol-category">{{ symbol.category }}</div>
            <div class="symbol-bar">
              <div 
                class="bar-fill"
                :style="{ width: (symbol.count / 15 * 100) + '%' }"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 梦境模式识别 -->
      <div class="dream-card patterns-section">
        <h3>梦境模式</h3>
        <div class="patterns-grid">
          <div 
            v-for="pattern in dreamPatterns"
            :key="pattern.title"
            class="pattern-card"
          >
            <div class="pattern-icon">{{ pattern.icon }}</div>
            <div class="pattern-info">
              <h4>{{ pattern.title }}</h4>
              <p>{{ pattern.description }}</p>
              <div class="confidence-bar">
                <div 
                  class="confidence-fill"
                  :style="{ width: pattern.confidence + '%' }"
                ></div>
                <span class="confidence-value">{{ pattern.confidence }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- AI 洞察 -->
      <div class="dream-card insights-section">
        <h3>最近洞察</h3>
        <div class="insights-list">
          <div 
            v-for="insight in recentInsights"
            :key="insight.date"
            :class="['insight-item', insight.type]"
          >
            <div class="insight-date">{{ insight.date }}</div>
            <p class="insight-content">{{ insight.content }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dream-insights {
  padding: 1rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
}

.stat-icon {
  font-size: 2.5rem;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--primary-color);
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* 分布图表样式 */
.distribution-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

.distribution-bar {
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  align-items: center;
  gap: 1rem;
}

.bar-container {
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

/* 趋势图样式 */
.trend-container {
  margin-top: 1rem;
}

.trend-legend {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.graph-placeholder {
  height: 200px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

/* 符号分析样式 */
.symbols-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.symbol-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 12px;
}

.symbol-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.symbol-category {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.symbol-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.symbol-bar .bar-fill {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

/* 模式识别样式 */
.patterns-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.pattern-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.pattern-icon {
  font-size: 2rem;
}

.pattern-info {
  flex: 1;
}

.confidence-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 0.5rem;
  position: relative;
}

.confidence-fill {
  height: 100%;
  background: var(--primary-color);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.confidence-value {
  position: absolute;
  right: 0;
  top: -20px;
  font-size: 0.9rem;
  color: var(--primary-color);
}

/* 洞察列表样式 */
.insights-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.insight-item {
  padding: 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.insight-item.positive {
  border-left: 4px solid var(--dream-peaceful);
}

.insight-item.neutral {
  border-left: 4px solid var(--dream-mysterious);
}

.insight-item.warning {
  border-left: 4px solid var(--dream-nightmare);
}

.insight-date {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

h3 {
  color: var(--text-primary);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

h4 {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

p {
  color: var(--text-secondary);
  line-height: 1.5;
}
</style> 